import React, { ChangeEvent, FC, useEffect, useState } from "react";
import { CaretUpFilled } from '@ant-design/icons';
import { Input } from 'antd';
import styles from '../pages/manager/common.module.scss'
import { useNavigate, useLocation , useSearchParams} from 'react-router-dom'
import { LIST_SEARCH_PARAM_KEY } from "../constant"

const { Search } = Input

const List: FC = () => {
    const nav = useNavigate()
    const { pathname } = useLocation()
    const [keyword, setKeyword] = useState('')
    function handleChange(event: ChangeEvent<HTMLInputElement>) {
        setKeyword(event.target.value)
    }
    //获取url参数
    const [SearchParams]=useSearchParams()
    useEffect(()=>{
        const curVal=SearchParams.get(LIST_SEARCH_PARAM_KEY)||''
        setKeyword(curVal)
    },[SearchParams])
    function handleSubmit(keyword: string) {
        nav({
            pathname,
            search: `${LIST_SEARCH_PARAM_KEY}=${keyword}`
        })
    }
    return <>
        <span className={styles.order}>
            <span>时间倒叙<CaretUpFilled /></span>
            <span>状态<CaretUpFilled /></span>
        </span>
        <Search
            className={styles.input}
            allowClear
            placeholder="请输入问卷名进行搜索"
            value={keyword}
            onChange={handleChange}
            onSearch={handleSubmit}
        />
    </>
}

export default List